<style scoped lang="less">
.container {
    border: 1px solid #ddd;
    ;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    ;
}

.title {
    background: #ddd;
    border: 1px solid #ddd;
    border-radius: 4px;
    ;
    padding: 5px;
}
</style>
<template>
    <div class="title" 
 style="display:flex;justify-content: space-between;;padding-right: 10px;;"
>
        <slot name="title"></slot>
<template v-if="1==1">
    <slot name="icon" v-if="slots?.icon"
    @click.native="() => {
        triggerclick()
    }"
></slot>
    <Svgicon name="down" style="position: relative;top: 4px;;left: 4px;;"
    @click.native="() => {
        triggerclick()
    }"
></svgIcon>
</template>
    </div>
    <div class="container" v-if="!hiddenContainer">
        <slot></slot>
    </div>
</template>
<script setup>
import { useSlots, useAttrs,ref } from 'vue'
import Svgicon from './svgicon.vue';
const hiddenContainer=ref(false)
const slots = useSlots()
function triggerclick() {
    hiddenContainer.value=!hiddenContainer.value
}

</script>